<script setup lang="ts">
import {getLoginUser} from "~/api/userApi";
import {constantStore} from "~/stores/constantStore";
import {userInfoStore} from "~/stores/userInfoStore";
import {successCode} from "~/api/base/http";
import {onMounted, ref} from "vue";
import {getWebInfo} from "~/api/webInfoApi";
import headerLink from "~/components/constant/headerLink.vue";

onMounted(() => {
  getUserInfo();
})

/**
 * 获取网站信息
 */

let {data: webInfoRes} = await useAsyncData('getWebInfo', () => getWebInfo());
const webInfo = ref(constantStore().parseRes(webInfoRes));
constantStore().setWebInfo(webInfo.value)

/**
 * 获取用户信息
 */
function getUserInfo() {
  // if (userInfoStore().loginUser === null) {
  //   getLoginUser().then((res) => {
  //     if (successCode === res.code) {
  //       userInfoStore().setLoginUser(res.data)
  //     }
  //   })
  // }
  userInfoStore().initLogUser();
}

</script>

<template>
  <div class="header-box">
    <div class="header-left-box">
      <div class="web-log-box">
        <el-link :underline="false" href="/">
          <el-avatar :size="80" :src="constantStore().webLogo"/>
        </el-link>
      </div>
      <div class="web-title-box">
        <el-link :underline="false" href="/">
          {{ constantStore().webTitle }}
        </el-link>
      </div>
    </div>
    <div class="header-tab-box">
      <div class="tab-item">
        <header-link :active="constantStore().currentActivityTab ==='index'" text="首 页" link="/" icon="icon-shouye"/>
      </div>
      <div class="tab-item">
        <header-link :active="constantStore().currentActivityTab ==='shop'" text="商 城" link="/shop" icon="icon-shouye1"/>
      </div>
      <div class="tab-item">
        <header-link :active="constantStore().currentActivityTab ==='market'" text="玩家市场" link="/market" icon="icon-huodong"/>
      </div>
      <div class="tab-item">
        <header-link :active="constantStore().currentActivityTab ==='community'" text="玩家社区" link="/community" icon="icon-huodong"/>
      </div>
      <div class="tab-item">
        <header-link :active="constantStore().currentActivityTab ==='action'" text="活 动" link="/action" icon="icon-huodong"/>
      </div>
    </div>
    <div class="header-right-box">
      <div class="user-login-box" v-if="userInfoStore().loginUser === null || userInfoStore().loginUser ===''">
        <div class="login-box">
          <el-link :underline="false" href="/login?redirect=login">
            登 录
          </el-link>
        </div>
        ·
        <div class="register-box">
          <!--          <router-link :to="{name: '/login', params: {redirect: '2'}}">注 册</router-link>-->
          <el-link :underline="false" href="/login?redirect=register">
            注 册
          </el-link>
        </div>
      </div>
      <div class="user-info-box" v-else>
        <user-menu-msg :user-login="userInfoStore().loginUser"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: .3rem 0;
  user-select: none;

  .header-left-box {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;

    .web-log-box {
      margin: 0 1rem;
    }

    .web-title-box {
      :deep(.el-link__inner) {
        font-weight: bolder;
        font-size: 1.5rem;
      }
    }
  }

  .header-tab-box {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .header-right-box {
    width: 20%;
    justify-content: center;

    .user-login-box {
      display: flex;
      justify-content: center;
      align-items: center;

      :deep(.el-link__inner) {
        font-size: 1.2rem;
      }

      & > div {
        padding: 0 1rem;
      }
    }
  }
}

</style>